---
// import "@styles/base.scss"

export interface Props {
    visible: string,
    opacity?: number,
}

const { visible = "show", opacity } = await Astro.props
---

<div class="dialog-wrapper flexbox" 
     data-visible={ visible }
     style={ `background-color: rgba(0,0,0,${opacity ? opacity : '0.5'})` }>
    <div class="dialog-cont">
        <slot></slot>
        <button class="close-dialog">×</button>
    </div>
</div>

<script >
    const closeBtn = document.querySelector(".close-dialog")
    closeBtn?.addEventListener("click", function() {
        const isVisible = document.querySelector(".dialog-wrapper")?.getAttribute("data-visible")
        if(isVisible === "show") {
            document.querySelector(".dialog-wrapper")?.setAttribute("data-visible", "hide")
        }
    })
</script>

<style lang="scss">
.dialog-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.7);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    &[data-visible="show"] {
        opacity: 1;
        pointer-events: all;
    }
    .dialog-cont {
        position: relative;
        padding: 40px;
		margin: 0 auto 0;
		max-width: 786px;
		min-width: 360px;
		min-height: calc(100vh - 240px);
		font-family: var(--baseFont);
		border-radius: 3px;
		background-color: var(--bodyBGC);
		box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
		transition: all .3s ease;
    }
    .close-dialog {
        position: absolute;
        top: calc(-1 * var(--fontsBIG) * 2);
        right: calc(-1 * var(--fontsBIG) * 2);
        font-size: calc(1.6 * var(--fontsBIG));
        color: var(--textColor1);
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
}
</style>